import React, { Component } from 'react'
import style from './List.module.scss'
import classNames from 'classnames'

export default class List extends Component {
  render() {
    return (
      <div className={style.List}>
        {this.props.list.map(item => 
        <div 
          className={style.listItem} 
          key={item.id}
          >
            {/* className={`${style.icon} ${item.checked?style.activeIcon:''}`}
            onClick={() => this.props.onChangeChecked(item.id)} */ }
            <div className={classNames(style.icon,{[style.activeIcon]:item.checked})}
            onClick={() => this.props.onChangeChecked(item.id)}
            ></div>
            <div className={style.text}>{item.text}</div>
            <div className={style.del} onClick={() => this.props.onDel(item.id)}>X</div>
          </div>

          
        )}
      </div>
    )
  }
}
